<template>
	<!-- 课程视频 -->
	<!-- 面包屑 -->
	<div v-if="!isJurisdiction" v-loading="!isJurisdiction">
		<div class="left__videoEl__jurisdiction df fdc jc ac">
			<img style="width: 379px;height: 285px;" src="@/assets/images/kefus.png" alt="">
			<div class="title">
				当前权限过低，请咨询客服开通
			</div>
			<!-- <div class="btn"><el-link class="btn" target="_blank" :href="service" :underline="false">咨询客服</el-link></div> -->
		</div>
	</div>
	<div v-else>
		<header-item :title="fincation.name" :title1="classItem.title"></header-item>
		<div class="svideo-main">
			<div class="page_content">
				<div class="svideo-main__title">{{ classItem.title }}</div>
				<!-- 播放器区域 -->
				<div class="svideo-main__area df ac" v-loading="loading">
					<div class="left df fdc">
						<div class="left__videoEl">
							<!-- 视频组件 -->
							<videoItem :classItem="classItem" v-if="classItem.url" :key="classItem.id"></videoItem>
						</div>
						<div class="left__info df ac">
							<infoItem :classItem="classItem" :courseItem="courseItem" :title="fincation.name">
							</infoItem>
						</div>
					</div>
					<div class="right df fdc">
						<div class="right__course-name df ac ">
							<div class="img"></div>
							{{ fincation.name }}
						</div>
						<div class="right__course-list">
							<el-scrollbar ref="ScrollerRef">
								<template v-if="courseType == 3">
									<el-collapse v-model="courseId" accordion @change="handleChange"
										style="--el-fill-color-blank:#404040;--el-border-color-lighter:#666666;--el-collapse-header-text-color:#ffffff;--el-collapse-header-font-size:18px">
										<template v-for="item in categofyList" :key="item.id">
											<el-collapse-item :title="item.title1" :name="item.id + ''">
												<template #title>
													<div style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
														{{ item.title }}
													</div>

												</template>

												<div class="__item" v-for="l in item.items" :key="l.id" :id="'videoId' + l.id"
													:class="{ '--course_active': l.id == itemId }" @click.stop="detailClick(l)">
													<div class="_name row1">{{ l.title }}</div>
													<div class="timer">时长：{{ convertSecondsToHMS(l.times) }}</div>
												</div>
											</el-collapse-item>
										</template>
									</el-collapse>
								</template>
								<template v-else>
									<div class="__item" v-for="l in categofyList" :key="l.id" :id="'videoId' + l.items[0].id"
										:class="{ '--course_active': l.items[0].id == itemId }" @click.stop="detailClick(l.items[0], l.id)">
										<div class="_name row1">{{ l.items[0].title }}</div>
										<div class="timer">时长：{{ convertSecondsToHMS(l.totalTimes) }}</div>
									</div>
								</template>
							</el-scrollbar>
						</div>
					</div>
				</div>
				<div class="svideo-main__tab df ac">
					更多课程
				</div>
				<div class="df ffrw">
					<xy-course-item v-for="item in CourseList" :item="item"
						style="--course-item-bgcolor:#27262B"></xy-course-item>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import headerItem from './components/header.vue'
import videoItem from './components/videoItem.vue'
import infoItem from './components/infoItem.vue'
import { useRoute, useRouter } from "vue-router";
import api from "@/api/api";
import { convertSecondsToHMS } from '@/utils/utils';
import { useUserStore } from "@/stores";
import type { CollapseModelValue, ElScrollbar } from 'element-plus';
//组件命名-----
defineOptions({ name: "vidwoc-index" })
const route = useRoute()
const store = useUserStore()
/**
 * 从别的地方跳转过来 接受下面这三个参数 courseId 课程id  id小节id  分类id courseType
 */
//课程id
const courseId = ref<any>(route.query.courseId)
//小节id
const itemId = ref(route.query.id)
//分类类型
const courseType = ref<any>(route.query.courseType)

/**
 * 获取客服
 */
const service = ref('')
const Getcustomer = async () => {
	const res = await api.GetcustomerService_API()
	if (res.code === 0) {
		service.value = res.data.weixinWorkChat.chatUrl
		console.log("🚀 ~ Getcustomer ~ service.value:", service.value)
	}
}






/**
 * 折叠面板切换
 */
const handleChange = (val: CollapseModelValue) => {
	courseId.value = val
}
//课节详情
const classItem = ref<any>({})
//是否有权限
const isJurisdiction = ref(false)
/**
 * 根据小节获取详情
 */
const GetCourseItem = async () => {
	const res = await api.GetCourseItem_API({ itemId: itemId.value })
	if (res.code === 0) {
		classItem.value = res.data
	}
}
const fincation = ref<any>({})
/**
 * 获取课程分类
 */
const GetClassfincation = async () => {
	const res = await api.GetClassfincation_API()
	if (res.code === 0) {
		fincation.value = res.data.find(el => el.value == courseType.value)
	}
}

const categofyList = ref<any>([])
//课程详情
const courseItem = ref<any>({})
/**
 * 根据类别查询列表
 */
const GetCategofyList = async () => {
	const res = await api.GetCategofyList_API({ courseType: courseType.value })
	if (res.code === 0) {
		categofyList.value = res.data
	}
}
/**
 * 通过课程id获取课程详情
 */
const GetdetailList = async () => {
	const res = await api.Getdetail_API({ id: courseId.value })
	if (res.code === 0) {
		courseItem.value = JSON.parse(JSON.stringify(res.data))
		if (!itemId.value) itemId.value = courseItem.value.items[0].id
		delete courseItem.value.items
		isJurisdiction.value = true
	} else if (res.code === 2001) {
		// classItem.value = res.data
		isJurisdiction.value = false
		console.log("🚀 ~ GetCourseItem ~ classItem.value:", classItem.value)
	}
}
const loading = ref(false)
/**
 * 初始化
 */
const init = async () => {
	loading.value = true
	//获取课程分类
	await GetClassfincation()
	//通过课程id获取课程详情
	await GetdetailList()
	//先请求课程分类 和课程id获取课程详情   看有没有权限 没有权限就不执行下面的请求 防止报错
	if (isJurisdiction.value) {
		//根据类别查询列表
		await GetCategofyList()
		//根据小节获取详情
		await GetCourseItem()
		//让选中的列表出现在屏幕中
		await GetVideoIdElement()
	}

	loading.value = false
}
onMounted(async () => {
	init()
	//更多课程 需要 获取课程列表
	await GetCourseList()
	await Getcustomer()
})
//监听 是当前路由跳当前路由
watch(() => route.query, async (val) => {
	if (!val.courseId || !val.courseType) return
	courseId.value = val.courseId
	courseType.value = val.courseType
	itemId.value = val.id
	init()
	//让选中的列表出现在屏幕中
	await GetVideoIdElement()
})
//折叠面板打开
const detailClick = async (item: any, id?: any) => {
	if (courseType.value != 3) {
		courseId.value = id
	}
	itemId.value = item.id
	//通过课程id获取课程详情
	await GetdetailList()
	//根据小节获取详情
	await GetCourseItem()
}


const ScrollerRef = ref<InstanceType<typeof ElScrollbar>>()
/**
 * 让选中的列表出现在屏幕中
 */
const GetVideoIdElement = () => {
	const dom = document.getElementById(`videoId${itemId.value}`)
	ScrollerRef.value && ScrollerRef.value.setScrollTop(+dom!.offsetTop)
}

/**
 * 获取课程列表
 */
const CourseList = ref<any>([])
const GetCourseList = async () => {
	const res = await api.GetCourseList_API({ page: 1, limit: 8, type: courseType.value })
	console.log("🚀 ~ GetCourseList ~ fincation.value.value:", fincation.value.value)
	if (res.code === 0) {
		CourseList.value = res.data.data

	}

}
</script>

<style lang="scss" scoped>
.svideo-main {
	background-color: #000000;
	color: $white;

	&__title {
		font-size: 20px;
		padding: 27px 0;
	}

	&__area {
		width: 100%;
		height: 580px;
		background-color: #282828;

		.left {
			flex: 1;
			height: 100%;

			&__videoEl {
				flex: 1;
			}

			&__info {
				padding: 0 20px;
				height: 65px;
				background: #27262B;
				font-size: 14px;
			}
		}

		.right {
			height: 100%;
			width: 330px;
			border: 1px solid #404040;

			&__course-name {
				width: 330px;
				height: 70px;
				padding: 20px;
				font-size: 20px;
				background-color: #404040;

				.img {
					width: 25px;
					height: 20px;
					margin-right: 10px;
					background-size: contain;
					background-image: url('@/assets/images/jxys1.png');
				}
			}

			&__course-list {
				height: 0;
				flex: 1;
				background-color: #404040;

				.__item {
					border-bottom: 1px solid #666666;
					padding: 20px 30px 20px 60px;
					color: $color1;
					font-size: 16px;
					position: relative;
					cursor: pointer;

					.timer {
						font-size: 12px;
					}

					&:last-child {
						border-bottom: none;
					}
				}

				.--course_active {
					color: $bcolor;
					background-color: #252525;

					&::before {
						content: '';
						position: absolute;
						width: 16px;
						height: 16px;
						background-image: url('@/assets/images/yin.png');
						background-size: contain;
						z-index: 998;
						left: 40px;
						top: 24px;
					}
				}
			}
		}
	}

	&__tab {
		padding: 30px 0 30px 10px;
		font-size: 24px;
		position: relative;

		&::before {
			content: '';
			width: 3px;
			height: 24px;
			background: $bcolor;
			position: absolute;
			left: 0;
			top: 50%;
			transform: translate(0, -50%);
		}

		img {
			width: 26px;
			height: 24px;
			margin-right: 10px;
		}
	}
}

:deep(.el-collapse-item__header) {
	padding: 0 20px;
}

:deep(.el-collapse-item__content) {
	padding-bottom: 0;
}


.left__videoEl__jurisdiction {
	height: 100%;
	background-color: #ffffff;
	margin: 40px 0;

	img {
		width: 200px;
		height: auto;
		object-fit: contain;
	}

	.title {
		font-size: 18px;
		color: $color1;
		margin: 30px 0;
	}

	.btn {
		width: 190px;
		height: 44px;
		line-height: 44px;
		text-align: center;
		background-color: $bcolor;
		border-radius: 22px;
		cursor: pointer;
		color: #fff;
	}
}


</style>
